<%--
  Created by IntelliJ IDEA.
  User: !
  Date: 2021/7/26
  Time: 17:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .a1{
            width: 200px;
            height: 30px;
        }
        button{
            width: 150px;
            height: 30px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="layui-container">
    <h1>添加考勤</h1>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <select onchange="getstu()" class="a1" id="ban" name="interest" lay-filter="ban">
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">学生</label>
                    <div class="layui-input-block">
                        <select class="a1" id="xue" name="interest" lay-filter="xue">

                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">日期选择</label>
                <div class="layui-input-block">
                    <input id="rq" type="date" placeholder="请输入"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">原因</label>
                <div class="layui-input-block">
                    <input id="yy" type="text" name="" placeholder="请输入"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <button onclick="addinfo()" type="button" class="layui-btn">记录</button>
                <a id="mya" onclick="cha()" href="#" class="layui-btn" target="_blank">查看本月情况</a>
            </div>

        </div>
    </div>
</form>
</body>
<script src="layui/layui.js"></script>
<script>
    $(function (){
       var url="classes/ban";
       $.get(url).done(function(data){
          console.log(data);
           $("#ban").append("<option>请选择一个班级</option>");
          for(i=0;i<data.length;i++){
              var op=new Option(data[i].className,data[i].classId);
              $("#ban").append(op);
          }
           renderForm();//表单重新渲染
       });
    });
    function getstu(){
        $("#xue").empty();
        var classId=$("#ban").val();
        var url="classes/stu?stid="+classId;
        $.get(url).done(function (data){
            console.log(data);
            for(i=0;i<data.length;i++){
                var op=new Option(data[i].stname,data[i].stid);
                $("#xue").append(op);
            }
            renderForm();//表单重新渲染
        });
    }
    function addinfo(){
        var stid=$("#xue").val();
        var rq=$("#rq").val();
        var yy=$("#yy").val();
        console.log(stid+"--"+rq+"--"+yy);
        var data={
            stid:stid,
            date:rq,
            bz:yy
        }
        var url="classes/add";
        $.post(url,data).done(function (date){
            console.log(date);
            if(date.code==1){
                layer.msg("添加成功");
            }else{
                layer.msg("添加失败");
            }
        });
    }
    function cha(){
        var banid=$("#ban").val();
        var rq=$("#rq").val();
        $("#mya").attr("href","classes/select?sid="+banid+"&rq="+rq);
    }
    function renderForm(){
        layui.use('form', function(){
            var form = layui.form;

            form.render();
        });
    }
</script>
<script>
    layui.use(['layer', 'form'],function() {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , element = layui.element
            , laydate = layui.laydate
            , util = layui.util;

        form.on('select(ban)', function (data) {
            getstu();
        });

    });
</script>
</html>
